<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<title>控制后台</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
		<link rel="stylesheet" href="/app/admin/demos/css/console1.css" />
	</head>
	<body class="pear-container">
		<div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">辅种数量</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value1">
									0
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-note layui-font-blue"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">下载器</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value2">
									0
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-download-circle layui-font-blue"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">开启站点</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value3">
									0
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-play layui-font-blue"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">支持站点</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value4">
									0
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips" lay-on="site_sync">
									<i class="layui-icon layui-icon-release layui-font-blue"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">总做种数</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value5">
									0
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-upload layui-font-blue"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">计划任务</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value6">
									0
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-date layui-font-blue"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">任务运行次数</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value7">
									0
								</div>
								<div class="layui-col-xs4 layui-col-md4  top-panel-tips">
									<i class="layui-icon layui-icon-log layui-font-blue"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">在线人数</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="online">
									0
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-user layui-font-blue"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md9">
					<div class="layui-card" style="height:450px;">
						<div class="layui-card-body">
							<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
								<div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="layui-card" style="height:450px;">
						<div class="layui-card-header">系统信息</div>
						<div class="layui-card-body">
							<table class="layui-table">
								<colgroup>
									<col>
									<col style="width: 120px">
								</colgroup>
								<thead>
								<tr>
									<th>组件</th>
									<th>版本</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td><a href="https://gitee.com/ledc/iyuuplus-dev" target="_blank" rel="noreferrer">IYUU</a><a href="https://github.com/ledccn/iyuuplus-dev" target="_blank" rel="noreferrer">版本</a></td>
									<td title="<?=$app_filemtime?> <?=$app_commit_id?>"><a href="https://gitee.com/ledc/iyuuplus-dev/tags" target="_blank" rel="noreferrer"><?=$iyuu_version?></a><?php if ($show_update) { ?><button type="button" class="layui-btn layui-btn-xs" lay-on="git_pull" title="通过git拉取最新代码" style="margin-left: 5px">更新</button><?php } ?></td>
								</tr>
								<tr>
									<td title="<?=$app_filemtime?>">IYUU提交记录</td>
									<td><a href="https://gitee.com/ledc/iyuuplus-dev/commits/master" target="_blank" rel="noreferrer" title="<?=$app_filemtime?>"><?=$app_commit_id?></a></td>
								</tr>
								<tr>
									<td>Workerman</td>
									<td><?=$workerman_version?></td>
								</tr>
								<tr>
									<td>Webman</td>
									<td><?=$webman_version?></td>
								</tr>
								<tr>
									<td>WebmanAdmin</td>
									<td><?=$admin_version?></td>
								</tr>
								<tr>
									<td>PHP版本</td>
									<td><?=$php_version?></td>
								</tr>
								<tr>
									<td>MYSQL版本</td>
									<td><?=$mysql_version?></td>
								</tr>
								<tr>
									<td>操作系统</td>
									<td><?=$is_docker_env ? '<span class="layui-badge layui-bg-blue" title="Docker环境">Docker</span>' : $os?></td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="layui-col-xs12">
					<!-- 数据表格 -->
					<div class="layui-card" style="min-height:580px;">
						<div class="layui-card-header">待办事项</div>
						<div class="layui-card-body">
							<!-- 查询表单 -->
							<form class="layui-form top-search-from">

								<div class="layui-form-item">
									<label class="layui-form-label">完成状态</label>
									<div class="layui-input-block">
										<div name="completed" id="completed" value=""></div>
									</div>
								</div>

								<div class="layui-form-item layui-inline">
									<label class="layui-form-label"></label>
									<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
										<i class="layui-icon layui-icon-search"></i>查询
									</button>
									<button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
										<i class="layui-icon layui-icon-refresh"></i>重置
									</button>
								</div>
							</form>
							<table id="data-table" lay-filter="data-table"></table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--</div>-->
		<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
		<script src="/app/admin/component/pear/pear.js"></script>
		<script>
			layui.use(['layer', 'echarts', 'element', 'count', 'util', 'popup', 'notice'], function() {
				const $ = layui.jquery,
						layer = layui.layer,
						element = layui.element,
						count = layui.count,
						util = layui.util,
						popup = layui.popup,
						echarts = layui.echarts;

				util.on('lay-on', {
					site_sync: function () {
						$.ajax({
							url: '/admin/site/sync',
							dataType: "json",
							success: function (res) {
								if (res.code) {
									return layui.popup.failure(res.msg);
								}
								return layui.notice.success("同步站点成功");
							}
						});
					}
				});

				count.up("value1", {
					time: 4000,
					num: <?=$count_value1?>,
					bit: 0,
					regulator: 50
				});

				count.up("value2", {
					time: 4000,
					num: <?=$count_value2?>,
					bit: 0,
					regulator: 50
				});

				count.up("value3", {
					time: 4000,
					num: <?=$count_value3?>,
					bit: 0,
					regulator: 50
				});

				count.up("value4", {
					time: 4000,
					bit: 0,
					num: <?=$count_value4?>,
					regulator: 50
				});

				count.up("value5", {
					time: 4000,
					bit: 0,
					num: <?=$count_value5?>,
					regulator: 50
				});

				count.up("value6", {
					time: 4000,
					bit: 0,
					num: <?=$count_value6?>,
					regulator: 50
				});

				count.up("value7", {
					time: 4000,
					bit: 0,
					num: <?=$count_value7?>,
					regulator: 50
				});

				// IYUU在线人数
				setInterval(() => {
					let online = document.getElementById('online');
					if (online) {
						try {
							let s = localStorage.getItem('online_status');
							if (s !== null && s !== 'null') {
								online.innerText = s;
							}
						} catch (e) {
							online.innerText = '0';
						}
					}
				}, 1000);


				var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

				const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
				var option = {
					backgroundColor: '#fff',
					tooltip: {
						show: false
					},
					grid: {
						top: '10%',
						bottom: '6%',
						left: '6%',
						right: '6%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							margin: 10,
							//textStyle: {
								fontSize: 14,
								color: 'rgba(#999)'
							//}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#939ab6',
								opacity: .15
							}
						},
						data: <?=json_encode(array_keys($day7_detail))?>
					}, ],
					yAxis: [{
						type: 'value',
						offset: 15,
						max: 100,
						min: 0,
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							margin: 10,
							//textStyle: {
								fontSize: 14,
								color: '#999'
							//}
						},
						splitLine: {
							show: false
						}
					}],
					series: [{
						name: '2',
						type: 'line',
						z: 3,
						showSymbol: false,
						smoothMonotone: 'x',
						lineStyle: {
							width: 3,
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(59,102,246)' // 0% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(118,237,252)' // 100% 处的颜色
								}]
							},
							shadowBlur: 4,
							shadowColor: 'rgba(69,126,247,.2)',
							shadowOffsetY: 4
						},
						areaStyle: {
							//normal: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(227,233,250,.9)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(248,251,252,.3)' // 100% 处的颜色
									}]
								}
							//}
						},
						smooth: true,
						data: <?=json_encode(array_values($day7_detail))?>
					},]

				};
				echartsRecords.setOption(option);

				// pull拉取代码 2024年4月22日
				layui.util.on('lay-on', {
					git_pull: function () {
						$.ajax({
							url: "/admin/system/pull",
							dataType: "json",
							success: function (res) {
								console.log(res);
								if (res.code) {
									return layui.popup.failure(res.msg);
								}

								setTimeout(function () {
									parent.location.reload();
								}, 8000);

								return layui.popup.success("更新成功", function () {
									$.ajax({
										url: '/admin/system/action?command=stop',
										type: "POST",
										dataType: "json",
										success: function (res) {
											if (res.code) {
												return layui.popup.failure(res.msg);
											}
											return layui.notice.success("重启成功");
										}
									});
								})
							}
						});
					}
				});

				window.onresize = function() {
					echartsRecords.resize();
				}

			});

			// 字段 已完成：0待办，1已完成 completed
			layui.use(["jquery", "xmSelect"], function () {
				let value = layui.$("#completed").attr("value");
				let initValue = value ? value.split(",") : [];
				layui.xmSelect.render({
					el: "#completed",
					name: "completed",
					filterable: true,
					initValue: initValue,
					data: [{"value": "0", "name": "待办"}, {"value": "1", "name": "已完结"}],
					model: {"icon": "hidden", "label": {"type": "text"}},
					clickClose: true,
					radio: true,
				})
			});

			// 表格渲染
			layui.use(["table", "form", "common", "popup", "util"], function () {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.$;
				let common = layui.common;
				let util = layui.util;

				// 相关常量
				const SELECT_API = "https://2025.iyuu.cn/reseed/todo/select";

				/**
				 * 屏幕宽度小于指定值
				 * @param px
				 * @returns {boolean}
				 */
				function isWidthMin(px = 1500) {
					console.info('屏幕宽度：', layui.$(window).width());
					return layui.$(window).width() <= px;
				}

				// 表头参数
				let cols = [
					{
						title: "ID", align: "center",
						field: "id",
						width: 80,
					}, {
						title: "父ID", align: "center",
						field: "parent_id",
						hide: isWidthMin(),
						width: 80,
					}, {
						title: "任务标题", align: "center",
						field: "title",
					}, {
						title: "任务描述", align: "center",
						field: "description",
					}, {
						title: "开始时间", align: "center",
						field: "start_time",
						hide: isWidthMin(),
						width: 145,
					}, {
						title: "结束时间", align: "center",
						field: "end_time",
						hide: isWidthMin(),
						width: 145,
					}, {
						title: "已完成", align: "center",
						field: "completed",
						sort: true,
						width: 90,
						templet: function (d) {
							let field = "completed";
							if (d[field]) {
								return '<span class="layui-badge layui-bg-green">已完结</span>';
							}
							return '<span class="layui-badge layui-bg-gray">待办</span>';
						}
					}, {
						title: "创建时间", align: "center",
						field: "create_time",
						sort: true,
						width: 145,
					}, {
						title: "更新时间", align: "center",
						field: "update_time",
						sort: true,
						width: 145,
					}
				];

				// 渲染表格
				table.render({
					elem: "#data-table",
					url: SELECT_API,
					page: true,
					limit: 10,
					limits: [10, 20],
					cols: [cols],
					//skin: "line",
					size: "sm",
					autoSort: false,
					defaultToolbar: [{
						title: "刷新",
						layEvent: "refresh",
						icon: "layui-icon-refresh",
					}, "filter", "print", "exports"],
					done: function () {
						layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
					}
				});

				// 表格顶部搜索事件
				form.on("submit(table-query)", function (data) {
					table.reload("data-table", {
						page: {
							curr: 1
						},
						where: data.field
					})
					return false;
				});

				// 表格顶部搜索重置事件
				form.on("submit(table-reset)", function (data) {
					table.reload("data-table", {
						where: []
					})
				});

				// 表格排序事件
				table.on("sort(data-table)", function (obj) {
					table.reload("data-table", {
						initSort: obj,
						scrollPos: "fixed",
						where: {
							field: obj.field,
							order: obj.type
						}
					});
				});

				// 刷新表格数据
				window.refreshTable = function (param) {
					table.reloadData("data-table", {
						scrollPos: "fixed"
					});
				}
			});
		</script>
	</body>
</html>
